<template lang="pug">
    view(class="load-progress" :class="loadProgress!=0?'show':'hide'" :style="[{top:CustomBar+'px'}]")
        view(class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]")
        view(class="load-progress-spinner text-green")
</template>

<script>
export default {
  name: "load-progress",

  data() {
    return {
      CustomBar: this.CustomBar,
      loadProgress: 0
    };
  },

  props: {
    visible: { type: Boolean, default: false } // 显示控制
  },

  watch: {
    visible(value) {
      if (value === true) this.LoadProgress();
      if (value === false) this.loadProgress = 0; // 显示控制
    }
  },

  methods: {
    LoadProgress(e) {
      if (!this.visible) {
        this.loadProgress = 0;
        return;
      }

      this.loadProgress = this.loadProgress + 3;

      if (this.loadProgress >= 99) return;
      setTimeout(this.LoadProgress.bind(this), 100); // 递归，使用loadProgress递增3
    }
  }
};
</script>